import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { message, Modal } from 'antd';
import React, { useEffect, useRef } from 'react';
import { createGoods } from '../service';
import AliyunOSSUpload from '../../../components/ALiYunOSSUpload';
import EditorDemo from '@/components/Editor';

export default function BasicModal(props: any) {
  const [form] = ProForm.useForm();
  const { visible, handleCancel, user } = props;
  const formRef = useRef<ProFormInstance>();
  useEffect(() => {
    formRef?.current?.setFieldsValue(user);
  }, [user]);

  const create = async (values: any) => {
    const res = await createGoods(values);
    if (res.status_code !== undefined) {
      message.error('操作失败');
    }
    message.success('操作成功');
    handleCancel();
  };

  // const edit = async (id: string, values: any) => {
  //   const res = await updateUser(id, values);
  //   if (res.status_code !== undefined) {
  //     message.error('操作失败');
  //   }
  //   message.success('操作成功');
  //   handleCancel();
  // };

  const handleOk = (values: any) => {
    // return user ? edit(user.id, values) : create(values);
    return create(values);
  };

  const hadleUpLoaded = (cover: string) => {
    form.setFieldsValue({ cover: cover });
  };

  const setDetails = (value: string) => {
    form.setFieldsValue({ details: value });
  };

  return (
    <>
      <Modal
        title={user ? '编辑' : '新增'}
        visible={visible}
        onCancel={handleCancel}
        footer={null}
        width="1000px"
        destroyOnClose
      >
        <ProForm onFinish={handleOk} form={form} formRef={formRef}>
          <ProFormText
            width="md"
            name="category_id"
            label="分类"
            placeholder="请输入分类"
            rules={[{ required: true, message: '请输入分类' }]}
          />
          <ProFormText
            width="md"
            name="title"
            label="标题"
            placeholder="请输入标题"
            rules={[{ required: true, message: '请输入标题' }]}
          />
          <ProFormText
            width="md"
            name="description"
            label="描述"
            placeholder="请输入描述"
            rules={[{ required: true, message: '请输入描述' }]}
          />
          <ProFormText
            width="md"
            name="price"
            label="价格"
            placeholder="请输入价格"
            rules={[{ required: true, message: '请输入价格' }]}
          />
          <ProFormText
            width="md"
            name="stock"
            label="库存"
            placeholder="请输入库存"
            rules={[{ required: true, message: '请输入库存' }]}
          />
          <ProForm.Item
            name="cover"
            label="封面图"
            rules={[{ required: true, message: '请选择封面图' }]}
          >
            {/* Form.Item 会与其第一个子标签形成受控，当其变化时，子元素也更新执行，使用幽灵标签占位 */}
            <></>
            <AliyunOSSUpload accept="jpg,.png,.JPG,.PNG,.pdf,.PDF" hadleUpLoaded={hadleUpLoaded}>
              点击上传封面图
            </AliyunOSSUpload>
          </ProForm.Item>
          <ProForm.Item
            name="details"
            label="商品详情"
            rules={[{ required: true, message: '请输入商品详情' }]}
          >
            {/* Form.Item 会与其第一个子标签形成受控，当其变化时，子元素也更新执行，使用幽灵标签占位 */}
            <></>
            <EditorDemo setDetails={setDetails} />
          </ProForm.Item>
        </ProForm>
      </Modal>
    </>
  );
}
